import { ConfigProvider, Select, type SelectProps } from 'antd'
import themes, { type IThemesType } from '../../configs/themes'
import { useBasicStore } from '../../stores/useBasicStore'
import style from './indexStyle.module.sass'
import React from 'react'

const HomePage: React.FC = () => {

  // #region 变量声明
  const { theme, getTheme, setTheme } = useBasicStore()
  // #endregion

  // #region 函数
  // 点击主题的处理函数
  const handleClick = (newTheme: string) => {
    setTheme(newTheme)
  }
  // 处理主题xi选项的函数
  const handleThemesOptions = (themes: IThemesType): SelectProps['options'] => {
    const options: SelectProps['options'] = []
    for (const key in themes) {
      options.push({ label: themes[key].label, value: themes[key].className, icon: themes[key].icon })
    }
    return options
  }
  // #endregion

  // #region Hooks

  // #endregion

  return (
    <div className={style.home}>
      <div className={style.header}>
        {/* Logo */}

        {/* 主题 */}
        {
          Object.keys(themes).length <= 2
            ? <div className={style.theme_icon} onClick={() => handleClick(theme === 'white' ? 'black' : 'white')}>
              {getTheme().icon}
            </div>
            : <ConfigProvider
              theme={{
                components: {
                  Select: {
                    activeBorderColor: 'transparent',
                    activeOutlineColor: 'transparent',
                    hoverBorderColor: 'transparent',
                    selectorBg: 'transparent',
                  }
                },
                token: {
                  colorBorder: 'transparent'
                }
              }}
            >
              <Select
                value={theme}
                optionLabelProp='icon'
                onChange={setTheme}
                suffixIcon={null}
                options={handleThemesOptions(themes)}
                className={style.theme_icon}
                popupMatchSelectWidth={false}
                defaultValue={'white'}
                optionRender={(option) => (
                  <div style={{ minWidth: '140rem', display: 'flex', justifyContent: 'space-between' }}>
                    <span>{option.label}</span>
                    {themes[option?.value || 'white'].icon}
                  </div>
                )}
                style={{
                  width: '110rem'
                }}
              />
            </ConfigProvider>
        }
      </div>
    </div>
  )
}

export default HomePage
